<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/views/cover/base-param.jsp" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fc" tagdir="/WEB-INF/tags/form" %>
<%@ taglib prefix="btn" tagdir="/WEB-INF/tags/btn" %>
<link type="text/css" rel="stylesheet" href="${webroot}/madmin/vendors/select2/select2-madmin.css">
<link type="text/css" rel="stylesheet"
      href="${webroot}/madmin/vendors/bootstrap-select/bootstrap-select.min.css">
<link type="text/css" rel="stylesheet"
      href="${webroot}/madmin/vendors/multi-select/css/multi-select-madmin.css">
<link type="text/css" rel="stylesheet" href="${webroot}/madmin/vendors/bootstrap-datepicker/css/datepicker.css">
<link type="text/css" rel="stylesheet"
      href="${webroot}/madmin/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css">
<link type="text/css" rel="stylesheet"
      href="${webroot}/madmin/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css">

<script src="${webroot}/madmin/vendors/select2/select2.min.js"></script>
<script src="${webroot}/madmin/vendors/bootstrap-select/bootstrap-select.min.js"></script>
<script src="${webroot}/madmin/vendors/multi-select/js/jquery.multi-select.js"></script>
<script src="${webroot}/js/ui-dropdown-select.js"></script>
<script src="${webroot}/madmin/vendors/moment/moment.js"></script>
<script src="${webroot}/madmin/vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

<primus:page title="编辑首页">
    <jsp:attribute name="script">

        <script type="text/javascript">
            $(function () {
                $("#coverForm").validate(
                    {
                        submitHandler: function (form) {
                            if (!$("#url").val() && !$("#template").val()) {
                                layer.msg("url或template不能都为空");
                                return;
                            }
                            var url = "${webroot}/covers.do";
                            $.ajax({
                                cache: true,
                                type: "POST",
                                url: url,
                                data: $('#coverForm').serialize(),
                                async: false
                            }).done(function (data) {
                                layer.msg("保存成功");
                                console.log(data);
                                menuopen('${webroot}/covers/' + data + '.do');
                            }).fail(function () {
                                layer.msg("保存失败");
                            });
                        }
                    }
                );
                $('input.timepicker').datetimepicker({
                    format: 'YYYY-MM-DD HH:mm:ss',//选择完日期后，input框里的时间值的格式
                    startDate: new Date(),//开始日期时间，在此之前的都不可选，同理也有endDate
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    sideBySide: true //可以同时选择日期和时间
                });
            });

            function deleteProgram(id, name) {
                if (confirm("确定要删除栏目:" + name + " 吗？")) {
                    $.ajax({
                        url: "${webroot}/covers/${cover.id}/programs/delete.do",
                        type: "post",
                        dataType: "text",
                        data: {programId: id},
                        success: function (result) {
                            alert("删除该栏目成功");
                            menuopen('${webroot}/covers/${cover.id}.do');
                        },
                        error: function () {
                            alert("操作失败");
                            return false;
                        }
                    });
                } else {
                    //取消删除
                    return false;
                }
            }

        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    首页管理
                </li>
                <li class="active">
                    编辑首页
                </li>
            </ul>
        </div>

        <div class="page-content">
            <div class="panel panel-default new-add-brand">
                <div class="panel-heading">
                    <h3 class="panel-title">首页管理</h3>
                </div>
                <form role="form" id="coverForm" class="form-horizontal form-bordered" onsubmit="return false;">
                    <div class="panel-body pan">
                        <div class="form-body pal">
                            <div class="form-group">
                                <label for="name" class="col-md-2 control-label">名称:</label>
                                <div class="col-md-5">
                                    <div class="input-icon">
                                        <input name="name" id="name" type="text" placeholder="当前首页模板的名称"
                                               class="form-control" value="${cover.name}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">描述:</label>
                                <div class="col-md-5">
	                        <textarea name="description" id="description" rows="3"
                                      class="form-control">${cover.description}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="name" class="col-md-2 control-label">排序:</label>
                                <div class="col-md-5">
                                    <div class="input-icon">
                                        <input name="index" type="number" step="1"
                                               class="form-control" value="${cover.index == null ? 0 : cover.index}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="name" class="col-md-2 control-label">模板url(app端 模板url
                                    为模板唯一标识,可设置为数据源标识):</label>
                                <div class="col-md-5">
                                    <div class="input-icon">
                                        <input name="url" type="text" id="url"
                                               class="form-control" value="${cover.url}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="name" class="col-md-2 control-label">模板html:</label>
                                <div class="col-md-5">
                                    <div class="input-icon">
                            <textarea name="template" id="template" rows="3"
                                      class="form-control">${cover.template}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">使用场景:</label>
                                <select name="coverClientType"
                                        class="select2-size select2-offscreen col-md-2"
                                        tabindex="-1"
                                        title="">
                                    <option value="0"
                                            <c:if test="${cover.coverClientType == '0'}">selected </c:if>>快喝App
                                    </option>
                                    <option value="1"
                                            <c:if test="${cover.coverClientType == '1'}">selected </c:if>>官网
                                    </option>
                                    <option value="2"
                                            <c:if test="${cover.coverClientType == '2'}">selected </c:if>>官网融合
                                    </option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="name" class="col-md-2 control-label">生效时间:</label>
                                <div class="col-md-2">
                                    <div class="input-group bootstrap-timepicker timepicker">
                                        <input name="startTime"
                                               value="<fmt:formatDate value="${cover.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                                               class="form-control timepicker" type="text"/>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    -
                                </div>
                                <div class="col-md-2">
                                    <input name="endTime"
                                           value="<fmt:formatDate value="${cover.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                                           class="form-control timepicker" type="text"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">是否启用:</label>
                                <div class="col-md-10">
                                    <c:choose>
                                        <c:when test="${cover.status == 'ENABLE'}">
                                            <input type="radio" name="status" value="ENABLE" checked="true">是
                                            &nbsp;&nbsp;<input type="radio" name="status" value="DISABLE">否
                                        </c:when>
                                        <c:otherwise>
                                            <input type="radio" name="status" value="ENABLE">是
                                            &nbsp;&nbsp;<input type="radio" name="status" value="DISABLE" checked="true">否
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="id" value="${cover.id}">

                    <div class="form-actions">
                        <div class="col-md-offset-5 col-md-7">
                            <button id="save" type="submit" class="btn btn-primary">保存</button>
                            &nbsp;
                            <button type="reset" class="btn btn-gray" onclick="menuopen('${webroot}/covers.do');">取消
                            </button>
                        </div>
                    </div>
                </form>
                <c:if test="${not empty cover.id}">
                    <div class="panel-heading">
                        <h3 class="panel-title">首页中栏目管理</h3>
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn btn-link"
                                onclick="menuopen('${webroot}/covers/${cover.id}/programs/new.do');">
                            <i class="fa fa-plus"></i>
                            <span>新建栏目</span>
                        </button>
                    </div>
                    <table class="table table-hover table-striped table-bordered mg-top text-center" cellSpacing="0"
                           cellPadding="0"
                           width="100%" border=0 id="tableMenu">
                        <tr>
                            <th>数据源标识</th>
                            <th>名称</th>
                            <th>描述</th>
                            <th>状态</th>
                            <th>生效时间</th>
                            <th></th>
                        </tr>
                        <c:forEach items="${programs}" var="program" varStatus="status">
                            <c:if test="${empty program.parentId}">
                                <tr class="r${status.count%2}">
                                    <td>${program.sourceId}</td>
                                    <td>${program.name}</td>
                                    <td>${program.description}</td>
                                    <td>${program.status}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${program.timeRangePolicy == 'STANDARD'}">
                                                <fmt:formatDate value="${program.startTime}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/> 到
                                                <fmt:formatDate value="${program.endTime}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/>
                                            </c:when>
                                            <c:otherwise>
                                                继承上级
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0);"
                                           onclick="menuopen('${pageContext.request.contextPath}/covers/${cover.id}/programs/${program.id}.do');"
                                           class="btn btn-primary">
                                            <i class="fa fa-edit" title="修改"></i>
                                        </a>
                                        <a href="javascript:void(0);"
                                           onclick="deleteProgram('${program.id}','${program.name}');"
                                           class="label label-danger label-white middle">
                                            <i class="fa fa-trash" title="删除"></i>
                                        </a>
                                    </td>
                                </tr>
                            </c:if>
                        </c:forEach>
                    </table>
                </c:if>

            </div>
        </div>
    </jsp:body>
</primus:page>
